<template>
    <div style="height:300px;" ref="barRef">

    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        props: {
            barCharOpt: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        watch: {
            barCharOpt: {
                immediate: true,
                handler(newVal) {
                    if (newVal) {
                        let tempData = JSON.parse(JSON.stringify(newVal))
                        this.$nextTick(() => {
                            this.init(tempData)
                        })

                    }
                }
            }
        },
        data() {
            return {

            }
        },

        methods: {
            init(opt) {
                const barEl = this.$refs.barRef
                if (barEl) {
                    let myChart = null
                    this.$nextTick(() => {
                        myChart = echarts.init(barEl)
                        let option = {
                            color: ["#91caff", "#5cdbd3"],
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {
                                trigger: "axis", // 触发类型（'item’,数据项图形触发，主要在散点图，饼状图等无类目轴的图表中使用；'axis',坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none',不触发）
                                axisPointer: {
                                    type: 'shadow', // 指示器类型（'line'，直线指示器；'shadow'，阴影指示器；'none',无指示器；'cross',十字准星） 
                                    snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断
                                    label: { // 暂时没发现有效
                                        margin: 520, // label距离轴的距离
                                        color: '#FFF', // 文字颜色
                                        fontStyle: 'normal',
                                        padding: [50, 20]
                                    },
                                },

                                backgroundColor: "#6f6f6f", // 悬浮窗的背景
                                showContent: true, // 是否显示提示框悬浮层，默认显示
                                alwaysShowContent: false, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                                confine: false, // 是否将tooltip框限制在图标的区域内
                                textStyle: {
                                    color: '#fff', // 提示框文字的颜色
                                    fontStyle: 'normal', // 字体（'normal'无样式，'italic'斜体,'oblique',倾斜字体）
                                    fontWeight: '700', // 文字粗细（'normal'无样式；'bold'加粗;'bolder'加粗的基础上再加粗；'lighter'变细；数字定义的粗细也可以，取值范围100至700）
                                    fontSize: '12', // 文字字体大小
                                    lineHeight: '20', // 行高
                                },

                                formatter: function (params) {
                                    let contentStr = ''
                                    params.forEach((item) => {
                                        contentStr += `<div> ${item.marker}${item.name}:${item.data}(元) </div>`
                                    })
                                    return (
                                        `<div>
                                            <div style='color:red;font-size:16px;'>2023年数据--${params[0].seriesName}</div>
                                            ${contentStr}
                                        </div>`
                                    )
                                },

                                enterable: true, // 鼠标是否可进入提示框浮层中，Boolean默认是false，如果需要详情内有交互，如添加链接，可设置为true
                                padding: [5, 5],
                                animation: false,
                                renderMode: 'html'

                            },
                            legend: {
                                data: ['销量', '销量2','利率']
                            },
                            xAxis: {
                                data: opt.xAxis.data,
                            },
                            yAxis: {
                                splitLine: { lineStyle: { color: 'pink', type: 'dashed' } }, // 设置y轴为虚线
                            },
                            series: this.seriesMap(opt),
                            dataZoom: [
                                {
                                    type: 'slider',
                                    // start: 0,
                                    // end: 50,
                                    startValue: 0,
                                    barWindt: 10,
                                    // 数据窗口范围的结束数值（一页显示多少条数据）
                                    endValue: 3,
                                    handleSize: 8,
                                    handleStyle: {
                                        color: '#ddd'
                                    }
                                }
                            ],
                        }

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    })
                }
            },

            seriesMap(opt) {
                let { series } = opt
                let defaultSeriesItem = {
                    data: [],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, // 开启显示
                                position: 'top', // 在上方显示
                                textStyle: {
                                    // 数值样式
                                    color: '#000',
                                    fontSize: 12
                                }
                            }
                        }
                    }
                }

                return series.map((item) => {
                    return {
                        ...defaultSeriesItem,
                        ...item
                    }
                })


            }
        },
    }
</script>